<script lang="ts" setup>
import Item from './TabContainer/Item.vue'
import type { ICategoryResponse } from '@/typings/api'

defineProps<{
  categoryList: ICategoryResponse
}>()

const { categoryState } = $(useCategory())

const active = computed(() => {
  // 未选中其他分类或者选中了全部 初始 !undifined 为true 
  return !categoryState?.categoryParentId || categoryState.categoryParentId === -1
})

</script>

<template>
  <view class="tab">
    <Item :id="-1" title="全部" :active="active" />
    <Item v-for="item in categoryList" :id="item.id" :key="item.name" :title="item.name"
      :active="categoryState?.categoryParentId === item.id" />
  </view>
</template>

<style lang="scss" scoped>
.tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx 35rpx 0 35rpx;
}
</style>